<template>
  <svg :height="32" :width="32">
    <!-- r = (width / 2) - (stroke-width * 2)-->
    <circle stroke="#ccc" stroke-width="3" fill="transparent" cx="16" cy="16" r="10" />

    <circle
      stroke="#3881ff"
      :stroke-width="strokeWidth"
      fill="transparent"
      :cx="radius"
      :cy="radius"
      :r="normalizedRadius"
      :stroke-dasharray="`${circumference} ${circumference}`"
      :stroke-dashoffset="strokeDashoffset"
      class="progress-ring" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'

// radius - strokeWith * 2
const normalizedRadius = computed(() => props.radius - props.strokeWidth * 2)
// circumference = normalizedRadius * 2 * Math.PI
const circumference = computed(() => normalizedRadius.value * 2 * Math.PI)
// strokeDashoffset = circumference - (progress / 100) * circumference
const strokeDashoffset = computed(
  () => circumference.value - (props.progress / 100) * circumference.value
)

const props = defineProps({
  radius: {
    type: Number,
    default: 16,
  },
  strokeWidth: {
    type: Number,
    default: 3,
  },
  progress: {
    type: Number,
    default: 0,
  },
})
</script>

<style scoped>
.progress-ring {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>
